<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="优惠券"></van-nav-bar>
    <!-- #endif -->
    <Tabs ref="tabView" :tabs="tabs" :selectInx="selectInx" @set-select="setSelect"></Tabs>
    <NoUsedList v-if="selectInx === 'notUsed'"></NoUsedList>
    <EffectiveList v-if="selectInx === 'effective'"></EffectiveList>
    <UsedList v-if="selectInx === 'used'"></UsedList>
    <ExpiredList v-if="selectInx === 'expired'"></ExpiredList>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import Tabs from '@/components/tabs/tabs.vue';
import NoUsedList from './noUsedList.vue';
import EffectiveList from './effectiveList.vue';
import UsedList from './usedList.vue';
import ExpiredList from './expiredList.vue';
import { setToastInstance, systemInfo } from '@/mixins/info';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const tabView = ref();
const selectInx = ref('notUsed');
const tabs = reactive([
  {
    id: 'notUsed',
    name: '未使用',
  },
  {
    id: 'effective',
    name: '待生效',
  },
  {
    id: 'used',
    name: '已使用',
  },
  {
    id: 'expired',
    name: '已过期',
  },
]);
const setSelect = (id: any) => {
  selectInx.value = id;
};

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>